<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
				</image>
			</view>
		</view>
		<image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
		<view class="title">隐私保护协议</view>
		<view class="name">一、总则</view>
		<view class="detail">为保护用户（以下简称 “您”）的个人信息安全，规范 “夷陵城市停车” 小程序（以下简称 “本小程序”）对个人信息的收集、使用、存储及保护行为，依据《中华人民共和国个人信息保护法》《中华人民共和国网络安全法》等法律法规，制定本协议。</view>
		<view class="name">二、个人信息的收集与使用</view>
		<view class="detail">（一）收集范围<br>
		本小程序为您提供停车相关服务时，可能收集以下个人信息：<br>
		车辆信息：车牌号（如您绑定的 “京 GN24576” 等）、车辆类型等；<br>
		身份信息：为完成实名认证，可能收集您的姓名、身份证号码、手机号码等；<br><br>
		位置信息：为提供 “找车位” 服务，可能获取您的实时地理位置信息；<br>
		支付信息：为完成停车缴费、月卡办理、欠费补缴等交易，可能收集您的支付账户信息（如第三方支付平台账号相关信息）；<br>
		其他信息：您主动提供的咨询记录、服务反馈，或使用服务过程中产生的操作日志等信息。<br>
		（二）使用目的<br>
		收集上述信息仅用于为您提供停车服务（如车位查询、车辆管理、电子发票开具、无感支付开通等），或用于优化服务质量、向您推送您同意接收的热点资讯等。
		</view>
		<view class="name">三、个人信息的存储与保护</view>
		<view class="detail">
			（一）存储方式<br>
			您的个人信息将通过加密等安全技术存储在符合法律法规要求的服务器中，存储期限为实现服务目的所必需的时间（法律法规另有规定的除外）。<br>
			（二）保护措施<br>
			本小程序采取加密传输、访问控制、数据备份等技术与管理措施，防范您的个人信息被非法获取、篡改、泄露或损坏。
		</view>
		<view class="name">四、用户权利</view>
		<view class="detail">
			您有权查询、更正、补充您的个人信息；<br>
			您有权要求删除您的个人信息（法律法规规定的例外情形除外）；<br>
			您有权撤回对个人信息收集、使用的同意，但撤回同意可能导致部分服务无法使用；<br>
			您有权对本小程序的个人信息保护工作提出建议或投诉。
		</view>
		<view class="name">五、信息共享与转让</view>
		<view class="detail">
			本小程序不会向第三方共享、转让您的个人信息，除非：<br>
			已获得您的明确书面同意；<br>
			为履行法定义务或法定职责所需；<br>
			与具备合法资质的合作方（如支付机构、地图服务提供商等）共享，且合作方已签署保密协议，仅为实现本协议约定的服务目的使用您的信息。
		</view>
		<view class="name">六、协议的变更与终止</view>
		<view class="detail">
			本协议如需变更，将通过小程序公告等方式通知您。您继续使用本服务即视为同意变更后的协议。如您不再使用本服务，可申请注销账户，我们将在合理期限内删除您的个人信息（法律法规规定的留存情形除外）。
		</view>
		<view class="name">七、法律责任</view>
		<view class="detail">
			如本小程序违反本协议约定，导致您的个人信息受到损害，将依法承担相应的赔偿责任。
		</view>
		<view class="null"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.null {
		width: 750rpx;
		height: 40rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: relative;
		z-index: 999;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.title-names {
				width: 750rpx;
				position: absolute;
				text-align: center;
			}

			.logo {
				margin-left: 18rpx;
				width: 40rpx;
				height: 40rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.title {
		width: 670rpx;
		font-size: 48rpx;
		color: #1C274C;
		position: relative;
		margin-top: 10rpx;
	}

	.name {
		width: 670rpx;
		font-size: 40rpx;
		position: relative;
		margin-top: 40rpx;
	}

	.detail {
		width: 670rpx;
		font-size: 28rpx;
		color: rgba(40, 40, 40, 0.6);
		position: relative;
		margin-top: 20rpx;
	}
</style>